<template>
    <scroll-view scroll-y @scroll="onPageScroll" style="height: 100vh;">
        <div class="home-container">
            <div class="nav-header">
                <u-notice-bar mode="horizontal" bg-color="#000" color="#fff" :list="notice" font-size="24"
                    padding="12rpx 14rpx">
                </u-notice-bar>
            </div>
            <div class="banner">
                <div class="zhuanpan">
                    <div class="banner-bottom"></div>
                    <div class="banner-middle"></div>
                    <div class="banner-top"></div>
                    <div class="taiji"></div>
                </div>
                <div class="star"></div>
                <div class="report-wrap flex items-center justify-between">
                    <scroll-view scroll-y class="buyer-scroll" :scroll-top="scrollTop" scroll-with-animation="true">
                        <div class="buyer-box">
                            <div class="buyer-item flex items-center" v-for="(item, index) in userList" :key="index">
                                <div class="cover-img">
                                    <img class="avatar-icon" :src="item && item.inUser.avatar
                                        " alt="" />
                                </div>
                                <div class="info-card">
                                    <p class="font">2分钟前 {{ item && item.inUser.nickname }}</p>
                                    <p class="font">成功下单 打了100分好评</p>
                                </div>
                            </div>
                        </div>
                    </scroll-view>

                    <div class="text-box">
                        <p class="font">已有<span class="num">{{ userList.length }}</span>人</p>
                        <p class="font">领取生辰祥批</p>
                    </div>
                </div>
            </div>
            <div class="home-content">
                <div class="btn-wrap">
                    <img @click="goCalculate" class="test-btn" src="../../static/images/home/post_btn.png" alt="">
                </div>
                <img class="bg-img bg-img1" src="../../static/images/home/bg_img1.png" alt="">
                <img class="bg-img bg-img2" src="../../static/images/home/bg_img2.png" alt="">
                <img class="bg-img bg-img3" src="../../static/images/home/bg_img3.png" alt="">
                <img class="bg-img bg-img4" src="../../static/images/home/bg_img4.png" alt="">
                <div class="bottom-info">
                    <p class="font">聚象卓学教育科技(山东)有限公司</p>
                    <div class="service-row flex items-center justify-center">
                        <img class="service-icon" src="../../static/images/home/service.png" alt="" />
                        <p class="font">联系专属售后客服</p>
                    </div>
                </div>
            </div>
            <div class="bottom-btn" v-if="showBtn">
                <img @click="goCalculate" class="test-btn" src="../../static/images/home/post_btn.png" alt="">
            </div>
        </div>
    </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import cache from '@/utils/cache'
import * as accountApi from '@/api/account';

// #ifdef H5
import wechatOa from '@/utils/wechat'
// #endif

const notice = ["我平台所有测试仅供娱乐，不得作为生活、工作之指导。我平台产品拒绝向未成年人提供服务，如未成年人使用且造成一切后果由其监护人自行承担。"];

const scrollTop = ref(0); // 用户滑动scroll

const userList: any = ref([]);

const showBtn = ref(false); // 底部btn
const userStore = useUserStore();

onMounted(() => {
    const userLen = userList.value.length;
    setInterval(() => {
        scrollTop.value += 60;
        if (scrollTop.value >= userLen * 60) {
            scrollTop.value = 0;
        }
    }, 1500);
})

const share = async () => {
    let msg = {
        shareTitle: "生辰综合详批",
        shareLink: "https://smxcx.ricking.cn/mobile/",
        shareImage: "https://smapi.ricking.cn/share.png",
        shareDesc: "立即测算"
    }
    wechatOa.share(msg)
}
share();

const onPageScroll = (e: any) => {
    const { scrollTop } = e.detail;
    if (scrollTop >= 632) {
        showBtn.value = true;
    } else {
        showBtn.value = false;
    }
}

// 订单列表
const getOrderLists = async () => {
    const res = await accountApi.orderLists();
    userList.value = res.lists;
    console.log("订单列表", res.lists)
}
getOrderLists();


// 跳转测算表单
const goCalculate = async () => {
    let token = cache.get("token");
    if (!token) {
        wechatOa.getUrl();
    } else {
        setTimeout(() => {
            uni.navigateTo({ url: "/pages/calculate/index" })
        }, 300)
    }

}

onLoad(async (options) => {
    // if (userStore.isLogin) {
    //     // 已经登录 => 首页
    //     uni.reLaunch({
    //         url: '/pages/index/index'
    //     })
    //     return
    // }
    // #ifdef H5
    const { code } = options
    if (code) {
        uni.showLoading({
            title: '请稍后...'
        })
        try {
            const data: any = await wechatOa.authLogin(code);
            cache.set("token", data.token);
            uni.hideLoading();
            setTimeout(() => {
                uni.navigateTo({ url: "/pages/calculate/index" })
            }, 300)
        } catch (error: any) {
            uni.hideLoading()
            uni.redirectTo({
                url: '/pages/index/index'
            })
            throw new Error(error)
        }
    }
    // #endif
})
</script>

<style lang="scss" scoped>
.home-container {
    background-color: #5A6FAB;
    min-height: 100vh;

    .banner {
        @apply relative;
        width: 100%;
        height: 521px;
        background: url("../../static/images/home/bg_img.png") no-repeat;
        background-size: 100% 100%;
        z-index: 10;

        .zhuanpan {
            @apply absolute;
            width: 465px;
            height: 465px;
            margin: -200px -230px;
            z-index: 1;

            .banner-bottom {
                @apply w-full h-full relative;
                background: url("../../static/images/home/zhuanpan_bottom.png") no-repeat;
                background-size: 100% 100%;
                z-index: 1;
                animation: bottomRorating 10s linear infinite;
            }

            .banner-middle {
                width: 345px;
                height: 345px;
                background: url("../../static/images/home/zhuanpan_middle.png") no-repeat;
                background-size: 100% 100%;
                z-index: 1;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                animation: middleRorating 10s linear infinite;
            }

            .banner-top {
                width: 234px;
                height: 234px;
                background: url("../../static/images/home/zhuanpan_top.png") no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 1;
                transform: translate(-50%, -50%);
                animation: topRorating 10s linear infinite;
            }

            .taiji {
                width: 210rpx;
                height: 210rpx;
                background: url("../../static/images/home/taiji.png") no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 1;
                transform: translate(-50%, -50%);
            }

            @keyframes bottomRorating {
                0% {
                    transform: rotate(0);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            @keyframes middleRorating {
                0% {
                    transform: translate(-50%, -50%) rotate(0);
                }

                100% {
                    transform: translate(-50%, -50%) rotate(-360deg);
                }
            }

            @keyframes topRorating {
                0% {
                    transform: translate(-50%, -50%) rotate(0);
                }

                100% {
                    transform: translate(-50%, -50%) rotate(360deg);
                }
            }
        }

        .report-wrap {
            @apply absolute w-full box-border overflow-hidden;
            bottom: 10px;
            z-index: 1;
            padding: 0 20px;
            height: 60px;

            .buyer-scroll {
                flex: 1;
                height: 60px;
                overflow: hidden;

                .buyer-box {
                    .buyer-item {
                        height: 60px;

                        .avatar-icon {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%
                        }

                        .info-card {
                            color: #fff;
                            margin-left: 8px;
                            font-size: 12px;
                        }
                    }
                }
            }

            .text-box {
                white-space: nowrap;
                padding: 0 10px;
                color: #fff;
                font-size: 12px;
                border-left: 1px solid rgba(255, 255, 255, .3);

                .num {
                    color: rgb(255, 224, 120);
                }
            }
        }
    }

    .star {
        @apply absolute;
        top: 220px;
        background: url("../../static/images/home/beidou.png") no-repeat;
        background-size: 100% 100%;
        width: 220px;
        height: 126px;
        z-index: 1;
    }

    .home-content {
        @apply w-full box-border relative;
        padding: 0 10px 80px;

        .bg-img {
            @apply w-full;
            margin-top: 15px;
        }


        .btn-wrap {
            width: 355px;
            height: 69px;
            margin: 0 auto;

            .test-btn {
                width: 355px;
                height: 69px;
                animation: btnScale 0.5s linear alternate infinite;
                text-align: center;
            }

            @keyframes btnScale {
                0% {
                    transform: scale(0.9);
                }

                100% {
                    transform: scale(1);
                }
            }
        }

        .bottom-info {
            @apply text-center;
            margin-top: 20px;

            .font {
                color: #fff;
                font-size: 13px;
            }

            .service-row {
                margin-top: 20px;

                .service-icon {
                    width: 15px;
                    height: 15px;
                }

                .font {
                    padding-left: 6px;
                }
            }
        }
    }

    .bottom-btn {
        @apply fixed;
        bottom: -34px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;

        .test-btn {
            width: 375px;
            height: 69px;
            animation: btnScale 0.5s linear alternate infinite;
        }
    }
}

::v-deep .u-notice-bar {
    position: relative !important;
    z-index: 99;
}
</style>

<style></style>
